<template>
  <div class="date-range">
    <div>
        <el-date-picker
        v-model="startDate"
        :placeholder="startPlaceholder"
        :disabled-date="disabledStartDate"
        v-bind="$attrs.startOptions"
      />
    </div>
    <div>
        <el-date-picker
        v-model="endDate"
        :placeholder="endPlaceholder"
        :disabled-date="disabledEndDate"
        v-bind="$attrs.endOptions"
        :disabled="endDisabled"
      />
    </div>
  </div>
</template>

<script setup lang="ts">

let props = defineProps({
    startPlaceholder: {
        type: String,
        default: '请选择开始日期'
    },
    endPlaceholder: {
        type: String,
        default: '请选择结束日期'
    },
    isDisabledToday: {
        type: Boolean,
        default: true
    }
})

let startDate = ref<Date | null>(null)
let endDate = ref<Date | null>(null)
let endDisabled = ref<boolean>(true)

let disabledStartDate = (time: Date) => {
    if (props.isDisabledToday) {
        return  time.getTime() < Date.now() - 1000*60*60*24
    }
}

let disabledEndDate = (time: Date) => {
    if (startDate.value) {
        return  time.getTime() < startDate.value.getTime() + 1000*60*60*24
    }
}
let emits = defineEmits(['startChange', 'endChange'])

watch(()=>startDate.value, val => {
    if(!val) {
        endDisabled.value =  true
        endDate.value = null
    } else{
        endDisabled.value =  false
        emits('startChange', val)
    }
})

watch(()=>endDate.value, val => {
    if(val) {
        emits('endChange', {
            startDate: startDate.value,
            endDate: val
        })
    } 
})
</script>

<style scoped lang="scss">

.date-range{
    display: flex;
    align-items: center;
    div:first-child{
        margin-right: 6px;
    }
}
</style>
